<template>
  <div class="imgupdate">
    <el-upload
      v-if="!imgUrl"
      action=""
      list-type="picture-card"
      :before-upload="beforeupload"
      :http-request="httpRequest"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 显示图片 -->
    <div class="box" v-else>
      <img @click="perim" :src="imgUrl" alt="" v-errimg="defaultimg" />
      <i @click="clearImg" class="el-icon-close"></i>
    </div>
    <!-- 进度条 -->
    <el-progress
      v-if="progershow"
      style="width: 150px"
      :show-text="false"
      :percentage="percentage"
    ></el-progress>
    <!-- 预览的对话框 -->
    <el-dialog class="dialog" :visible.sync="isShow" title="预览图片">
      <div class="imgbox">
        <img :src="imgUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
export default {
  name: "imgupdate",
  props: ["imgUrl"],
  data() {
    return {
      isShow: false,
      cos: null,
      progershow: false,
      percentage: 0,
      defaultimg: require("@/assets/common/mm.jpg"),
    };
  },
  methods: {
    //点击预览
    perim() {
      this.isShow = true;
    },
    clearImg() {
      this.$emit("update:imgUrl", "");
    },
    beforeupload(file) {
      const less2M = file.size < 2 * 1024 * 1024;
      const isType = file.type === "image/png" || file.type === "image/jpeg";
      if (!less2M) {
        this.$message.error("图片大小不得超过2M");
      }
      if (!isType) {
        this.$message.error("图片格式必须为png和jpg");
      }
      return less2M && isType;
    },
    httpRequest(file) {
      this.progershow = true;
      // console.log(file);
      const myfile = file.file;
      this.cos.putObject(
        {
          Bucket: "renzhi0831-1307224155" /* 必须 */,
          Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
          Key: myfile.name /* 必须 */,
          StorageClass: "STANDARD",
          Body: myfile, // 上传文件对象
          onProgress: (progressData) => {
            //  progressData:上传过程中的实时进度对象
            // console.log(JSON.stringify(progressData))
            this.percentage = progressData.percent * 100;
            if (progressData.percent == 1) {
              setTimeout(() => {
                this.progershow = false;
              }, 1000);
            }
          },
        },
        (err, data) => {
          // data:上传成功后的返回值
          // err:上传出错的错误信息
          console.log(err || data);
          this.$emit("update:imgUrl", "http://" + data.Location);
        }
      );
    },
  },
  created() {
    this.cos = new COS({
      SecretId: "AKIDA8qITO3QWM7ctue7JF1WP4TcT3NQChwv", // 身份识别 ID
      SecretKey: "kDPKyQcaLq42j9I9k47tOcZFfqkMhlyu", // 身份密钥
    });
  },
};
</script>

<style lang="scss" scoped>
.imgupdate {
  .box {
    width: 150px;
    height: 150px;
    position: relative;
    .myicon {
      position: absolute;
      top: 0px;
      right: 0px;
      background-color: #fff;
      width: 20px;
      height: 20px;
      color: #ccc;
      text-align: center;
      line-height: 20px;
      border-radius: 0 0 0 15px;
      display: none;
      &:hover {
        cursor: pointer;
      }
    }
    &:hover .myicon {
      display: block;
    }
    img {
      width: 150px;
      height: 150px;
    }
  }
  .imgbox {
    text-align: center;
    img {
      width: 50%;
    }
  }
}
</style>
